<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/box.css" />
	</head>
	<body>
		<header></header>
		<!-- 放大镜 -->
		<main class="main_center">
		<div class="box">
			<div class="small-box">

				<div class="mask">

				</div>
			</div>
			<div id="img">
				<ul id="box1">

				</ul>
			</div>
		</div>

		<div class="big-box">

		</div>
		<!-- 购物车 -->
		<div id="cart">
			<h3></h3>
			<h4></h4>
			<h5></h5>
			<img src="img/35.png" class="picture">
			<h6>请选择规格</h6>
			<!-- 小图片 -->
			<img src="img/25.jpg" class="picture1">
			<p>选择尺码</p>

			<ul class="picture2">
				<li>S</li>
				<li>M</li>
				<li>L</li>
				<li>XL</li>
			</ul>
			<p>数量</p>
			
	<!-- 		加入购物车 -->
			<div class="goods_number">
				<span type="button">-</span>
				<span class="goods-num">0</span>
				<span type="button">+</span>
			</div>
			<!-- 购物车 -->
			<div class="goods_btns">
				<button id="add_cart" type="button" class="goods_btns_1">加入购物车</button>
				<button type="button" class="goods_btns_2">立即购买</button>
			</div>
		</div>
</main>
<footer></footer>
	</body>

</html>
<script src="./js/jQuery.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/FDJ.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
$("header").load("header.html");
$("footer").load("footer.html");


// 获取数据库的东西

	let str = location.search.split("=")[1];
	$.get("goodsAndShoppingCart/getGoodsInfo.php", `goodsId=${str}`, function(data) {
		let obj = JSON.parse(data);
		console.log(data)
		$(".small-box").css({
			backgroundImage: `url("${obj["goodsImg"]}")`
		});
		$(".big-box").css({
			backgroundImage: `url("${obj["goodsImg"]}")`
		});
		$("h3").html(`${obj["goodsName"]}`);
		$("h4").html(`${obj["goodsDesc"]}`);
		$("h5").html(`¥${obj["goodsPrice"]}`);

		let htmlStr = "";
		htmlStr += 
		`
			<li>
				<img src="${obj["beiyong1"]}">
			</li>
			<li>
				<img src="${obj["beiyong2"]}">
			</li>
		`
		//点击切换
		$("#box1").html(htmlStr);


		$("li").click(function() {
			$(".small-box").css({
				backgroundImage: `url("${obj["beiyong"+($(this).index()/1+1)]}")`
			});
			$(".big-box").css({
				backgroundImage: `url("${obj["beiyong"+($(this).index()/1+1)]}")`
			});
		})
	});

	
	$(".goods_btns_2").click(function(){
		location.href="http://127.0.0.1/h52109www/dickies/shopping.html";
	})
	$("#add_cart").click(function(){
		let username=sessionStorage.getItem("username");
		$.ajax({
			url:"./goodsAndShoppingCart/addShoppingCart.php",
			type:"POST",
			data:{"vipName":username,
				"goodsId":location.search.split("=")[1],
				"goodsCount":"1"
			},
			success:function(data){
				if(data==1){
					alert("添加成功");
				}else if(data==0){
					alert("添加失败");
				}
			},
			error:function(){
				alert("error");
			}
		})
	})
</script>
